import { reqMenuData } from '@/api/menu';
import { setStorage, getStorage, removeStorage } from '@/utils/storage';
import { showCart } from '@/utils/common'
import Decimal from 'decimal.js';

Page({
  data: {
    // 右侧轮播图
    swiperList: [],

    // 加入购物车的弹框
    addCartVisible: false,
    // 点开购物车的详情页弹框
    cartDetailVisible: false,
    // 商品详细描述页弹框
    goodsInfoVisible: false,

    // 从商品组件传过来的 商品信息
    goods: {},
    // pup 组件弹出位置
    placement: 'bottom',
    // 初始状态下，下拉刷新未被触发
    triggered: false,
    scrollTop: 0,
    sectionTop: [],
    currentIndex: 0,
    scrollIntoView: "",
    // 左侧分类列表
    categoryList: [],
    goodsList: [],
    goodsByCategory: {},
    // 已选中的文本
    selectedAmount: "",
    // 是否展示购物车 默认不展示
    cartHidden: true,
    // 购物车列表
    cartList: [],
    // 购物车总价格
    totalPrice: new Decimal(0),
    // 购物车总数量
    totalNum: new Decimal(0),
  },

  // 页面加载获取数据
  onLoad(options) {
    this.getOrderInfo()
  },

  // 右侧商品列表下拉刷新
  async onRefresh() {
    await this.getOrderInfo()
    this.setData({
      triggered: false
    })
  },

  onShow() {
    this.calculateCartGoods()
  },

  // 获取点餐左侧的分类列表
  async getOrderInfo() {
    const res = await reqMenuData()
    this.setData({
      categoryList: res[0].data,
      goodsList: res[1].data,
      swiperList: res[2].data.map(item => item.url),
    })
    this.groupGoodsByCategory()
    this.calculateSectionTop()
    this.calculateCartGoods()
  },

  // 分组商品数据
  groupGoodsByCategory() {
    const map = {}
    this.data.goodsList.forEach(item => {
      if (!map[item.categoryId]) map[item.categoryId] = []
      map[item.categoryId].push(item)
    })
    this.setData({
      goodsByCategory: map
    })
  },

  // 页面加载的时候用于计算每个 orderTag 和顶部的距离
  calculateSectionTop() {
    const query = wx.createSelectorQuery();
    query.selectAll(".category-name").boundingClientRect(rects => {
      const sectionTop = rects.map(rect => rect.top);
      this.setData({
        sectionTop
      });
    }).exec();
  },

  // scroll-view 点击跳转 设置 scroll-into-view 并设置 currentIndex 用于控制左侧分类列表的样式
  // 通过匹配子元素的 id 属性 自动将对应元素滚动到可视区域
  jump(event) {
    const detail = event.currentTarget.dataset.detail;
    this.setData({
      scrollIntoView: detail,
      currentIndex: Number.parseInt(detail.split("_")[1])
    })
  },

  // 滚动右侧商品时 联动左侧分类列表
  onScroll(event) {
    // 距离顶部的距离
    const scrollTop = event.detail.scrollTop;
    const sectionTop = this.data.sectionTop;
    let currentIndex = 0;
    for (let i = sectionTop.length - 1; i >= 0; i--) {
      if (scrollTop >= sectionTop[i] - 100) {
        currentIndex = i;
        break;
      }
    }
    if (currentIndex !== this.data.currentIndex) {
      this.setData({
        currentIndex
      });
    }
  },

  // 刚进页面的时候 查看 Storage 中是否有商品信息 如果有商品信息 展示购物车
  calculateCartGoods() {
    const cart = getStorage('cart') || { cartList: [], totalNum: new Decimal(0), totalPrice: new Decimal(0) }
    const cartList = cart.cartList
    // 设置到 appData 中
    this.setData({
      cartList,
      cartHidden: !showCart(cartList)
    })
    this.calculateTotalPrice()
  },

  // 点击选好了按钮
  handleChosen(event) {
    const { goods } = event.target.dataset
    // 如果 商品id 和 口味 一致 则需要把 num + 1 否则 在 cart 追加一个商品
    const id = goods.id
    const selectedAmount = event.target.dataset.selectedAmount
    // 先获取购物车列表
    const cart = getStorage('cart') || { cartList: [], totalNum: new Decimal(0), totalPrice: new Decimal(0) }
    let cartList = cart.cartList
    const existingIndex = cartList.findIndex(item => item.id === id && item.selectedAmount === selectedAmount)
    if (existingIndex !== -1) {
      // 已存在则数量+1
      cartList[existingIndex].num += 1;
      // 价格也相应增加
      // 总价 = 单价 * 数量（使用 Decimal 计算）
      const unitPrice = new Decimal(cartList[existingIndex].unitPrice); // 保存原始单价
      const num = new Decimal(cartList[existingIndex].num);
      cartList[existingIndex].price = unitPrice.mul(num).toFixed(2); // 更新这个商品的总价
    } else {
      // 不存在则添加新商品
      cartList.push({
        id: goods.id,
        num: 1,
        name: goods.name,
        url: goods.url,
        unitPrice: new Decimal(goods.price).toFixed(2),
        price: new Decimal(goods.price).toFixed(2),
        selectedAmount: selectedAmount
      });
    }
    // 保存购物车数据
    wx.showTabBar()
    this.setData({
      cartList,
      cartHidden: false,
      addCartVisible: false
    });
    // 计算总价
    this.calculateTotalPrice();
  },

  // 计算购物车总价
  calculateTotalPrice() {
    const cartList = this.data.cartList
    let totalPrice = new Decimal(0)
    let totalNum = new Decimal(0)
    for (let i = 0; i < cartList.length; i++) {
      const unitPrice = new Decimal(cartList[i].unitPrice);
      const num = new Decimal(cartList[i].num);
      totalPrice = totalPrice.add(unitPrice.mul(num));
      totalNum = totalNum.add(num);
    }
    this.setData({
      totalPrice: totalPrice.toFixed(2),
      totalNum: totalNum.toFixed(0),
    });
    setStorage('cart', { cartList, totalNum: this.data.totalNum, totalPrice: this.data.totalPrice });
  },

  // 监听商品详情页面的可见性变化
  onVisibleChange(event) {
    // 显示 tab栏
    wx.showTabBar()
    // 判断是否显示购物车
    this.setData({
      cartHidden: !showCart(this.data.cartList),
      addCartVisible: event.detail.visible
    })
    this.calculateChooseAmountText()
  },

  // 监听购物车详情页的可见性变化
  onCartVisibleChange(event) {
    this.setData({
      cartDetailVisible: event.detail.visible
    });
  },

  // 监听商品详情页的可见性变化
  onGoodsInfoVisibleChange(event) {
    // 显示 tab栏
    wx.showTabBar()
    // 判断是否显示购物车
    this.setData({
      cartHidden: !showCart(this.data.cartList),
      goodsInfoVisible: event.detail.visible
    })
  },

  // 绑定自定义事件 用于控制商品添加购物车页面的弹出
  handlePup(event) {
    // 隐藏 tab栏
    wx.hideTabBar()
    this.setData({
      addCartVisible: event.detail.visible,
      goods: event.detail.goods,
      cartHidden: true
    });
    this.calculateChooseAmountText()
  },

  // 绑定自定义事件 用于控制商品详情页的弹出
  handleGoosInfoPup(event) {
    // 隐藏 tab栏
    wx.hideTabBar()
    this.setData({
      goodsInfoVisible: event.detail.goodsInfoVisible,
      goods: event.detail.goods,
      cartHidden: true,
    });
  },

  // 点击商品详情页的加号 拉起商品添加购物车页面
  goodsInfoAddCart() {
    this.setData({
      addCartVisible: true,
      goodsInfoVisible: false
    });
    this.calculateChooseAmountText()
  },

  calculateChooseAmountText() {
    const selectedAmount = this.data.goods.amountList.flatMap(item => {
      return item.amountList.filter(item => item.selected)
        .map(item => item.name)
    })
    this.setData({
      selectedAmount: selectedAmount.join('/')
    })
  },

  // 选择口味时改变文本样式 并将其回写到商品详情区域
  chooseAmount(event) {
    // 获取口味索引
    const tasteIndex = event.target.dataset.tasteIndex;
    // 获取用量索引
    const amountIndex = event.target.dataset.amountIndex;

    // 深拷贝原始数据（避免直接修改引起视图不同步）
    const newGoods = JSON.parse(JSON.stringify(this.data.goods));

    // 重置当前口味下所有数量项的选中状态
    newGoods.amountList[tasteIndex].amountList.forEach(item => {
      item.selected = false;
    });

    // 设置当前点击项为选中
    newGoods.amountList[tasteIndex].amountList[amountIndex].selected = true;

    // 更新数据到视图
    this.setData({
      goods: newGoods
    });

    this.calculateChooseAmountText()
  },

  // 点击购物车左侧能够查看选择了哪些商品
  handleCartDetail() {
    this.setData({
      cartDetailVisible: !this.data.cartDetailVisible
    })
  },

  // 商品数量减少
  minusCount(event) {
    const index = event.target.dataset.index
    let cartList = [...this.data.cartList]
    let num = cartList[index].num
    num = num - 1
    if (num === 0) {
      cartList.splice(index, 1)
      const isCartEmpty = cartList.length === 0;
      this.setData({
        cartList,
        cartHidden: isCartEmpty,
        cartDetailVisible: !isCartEmpty
      })
    } else {
      cartList[index].num = num
      this.setData({
        cartList
      });
    }
    // 计算总价
    this.calculateTotalPrice();
  },

  // 商品数量增加
  addCount(event) {
    const index = event.target.dataset.index
    let cartList = this.data.cartList
    let num = cartList[index].num
    num = num + 1
    cartList[index].num = num
    // 保存购物车数据
    this.setData({
      cartList
    });
    // 计算总价
    this.calculateTotalPrice();
  },

  // 清空购物车
  clearCart() {
    removeStorage('cart')
    this.setData({
      cartHidden: true,
      cartDetailVisible: false
    })
  },

  // 跳转到去结算页面
  goToCheckout() {
    wx.navigateTo({
      url: '../checkout/checkout',
    })
  },
});